<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue-template</title>
    <style media="screen" type="text/css">
      body {
        padding: 0;
        margin: 0;
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
      }
      @keyframes bouncing-loader {
        from {
          opacity: 1;
          transform: translateY(0);
        }
        to {
          opacity: 0.1;
          transform: translateY(-1rem);
        }
      }
      #bouncing-loader {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
      }
      #bouncing-loader > div {
        width: 1rem;
        height: 1rem;
        margin: 3rem 0.2rem;
        background: #00d06c;
        border-radius: 50%;
        animation: bouncing-loader 0.6s infinite alternate;
      }
      #bouncing-loader > div:nth-child(2) {
        animation-delay: 0.2s;
      }
      #bouncing-loader > div:nth-child(3) {
        animation-delay: 0.4s;
      }
    </style>
    <!-- 引入阿里图库 -->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1030341_mirj35t5f2.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-template doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 加载动画 -->
    <div id="bouncing-loader">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
